<template>
  <view class="school-container">
    <SchoolListNavBar @search="toSearch" @locationChanged="onLocationChanged"></SchoolListNavBar>
    <view class="school-fields">
      <view class="field-container" v-for="school in list" :key="school.fieldId" @click="toSchoolDetail(school)">
        <view class="cover" v-if="school.logoImg128" :style="{'background-image':'url('+school.logoImg128+')'}"></view>
        <view class="cover" v-else>{{ school.shortName }}</view>
        <view class="field-info">
          <view class="flex">
            <view class="field-name">{{ school.shortName }}</view>
            <view class="field-subjects">{{ school.subjects }}</view>
          </view>
          <view class="flex" style="align-items: flex-end">
            <view class="field-address">{{ school.fieldName }}</view>
            <view class="field-distance">{{ showDistanceFormat(school.d) }}</view>
          </view>
          <view class="f1"></view>
          <view class="flex">
            <view class="tag1" v-if="school.legalPersonName">
              <image class="icon" src="@/static/blue_yuan_gou.png"></image>
              <view class="text">营业执照认证</view>
            </view>
            <view class="tag1" v-if="school.regInstitute">
              <image class="icon" src="@/static/blue_yuan_gou.png"></image>
              <view class="text">驾校运管认证</view>
            </view>
          </view>
          <view class="field-type">{{ school.typeStr }}</view>
        </view>
        <view class="divider"></view>
      </view>
    </view>
    <LocationDialog ref="LocationDialog" @locationChanged="onLocationChanged"></LocationDialog>
  </view>
</template>

<script>
import {schoolApi} from "@/api";
import Navbar from "@/components/navbar.vue";
import {mapGetters, mapActions} from 'vuex'
import LocationDialog from "@/components/LocationDialog.vue";
import utils from "../../libs/utils";
import SchoolListNavBar from "./SchoolListNavBar.vue";

export default {
  components: {Navbar, LocationDialog, SchoolListNavBar},
  data() {
    return {
      list: [],
      searchKWs: '',
      location: null,
    }
  },
  computed: {
    ...mapGetters(['platform', 'settings']),
  },
  async onLoad() {
    utils.getLocation().then(res => {
      this.onLocationChanged(res)
    })
  },
  async onPullDownRefresh() {
    await this.request()
    uni.stopPullDownRefresh()
  },
  onReachBottom() {
    this.request(this.index)
  },
  methods: {
    ...mapActions(['setGPSLocation']),
    showDistanceFormat: utils.showDistanceFormat,
    toSearch(searchKWs) {
      if (this.searchKWs !== searchKWs) {
        this.searchKWs = searchKWs
        this.request()
      }
    },
    toSchoolDetail(school) {
      uni.navigateTo({
        url: '/pages/school_info/school_info?id=' + school.id
      })
    },
    onLocationChanged(location) {
      this.location = location
      return this.request()
    },
    async request(index = 0) {
      const res = await schoolApi.list(index, this.location.longitude, this.location.latitude, this.location.type, this.searchKWs)
      if(index === 0) {
        this.list = res.data.data.list
      } else {
        this.list = this.list.concat(res.data.data.list)
      }
      console.log(this.list)
      this.location = res.data.data.location
      this.index = res.data.data.index
      this.setGPSLocation(this.location)
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f9f9f9;
}

.school-container {
  background-color: #f9f9f9;
  padding-bottom: 200rpx;

  .group-header {
    display: flex;

    .group-label {
      font-size: 16px;
      font-weight: bold;
      color: #000;
      margin-left: 30rpx;
      margin-top: 30rpx;
      flex: 1;
    }

    .more {
      margin-top: 34rpx;
      margin-right: 30rpx;
      color: #959595;
    }
  }

  .school-fields {
    background-color: #fff;
    padding-top: 1px;
    margin-bottom: 30rpx;

    .field-container {
      padding: 30rpx;
      display: flex;
      position: relative;

      .divider {
        width: 590rpx;
        height: 1px;
        position: absolute;
        right: 0;
        bottom: 0;
        background-color: #efefef;
      }

      .field-info {
        width: 490rpx;
        display: flex;
        flex-direction: column;
        flex: 1;

        .tag1 {
          margin-top: 20rpx;
          display: flex;
          margin-right: 30rpx;

          .icon {
            width: 28rpx;
            height: 30rpx;
            margin-right: 10rpx;
          }

          .text {
            font-size: 12px;
            color: #3f3f3f;
          }
        }
      }

      .cover {
        width: 160rpx;
        height: 120rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
        background-position: center;
        background-size: cover;
        border-radius: 10rpx;
        margin-right: 30rpx;
        overflow: hidden;
        background-color: #f9f9f9;
        text-align: center;
      }

      .field-name {
        font-size: 18px;
        color: #313131;
        font-weight: bold;
        flex: 1;
      }

      .field-subjects {
        color: #000;
        font-weight: bold;
      }

      .field-address {
        font-size: 12px;
        color: #717171;
        margin-top: 16rpx;
        flex: 1;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .field-type {
        margin-top: 6rpx;
      }

      .field-distance {
        margin-top: 6rpx;
        color: #999;
        font-size: 12px;
      }
    }
  }

  .contact-footer {
    box-shadow: 0 4upx 20upx 0 rgba(0, 0, 0, 0.1);
    height: 120rpx;
    background-color: #fff;
    position: fixed;
    bottom: 0;
    z-index: 100;
    left: 0;
    right: 0;
    display: flex;
    padding: 0 30rpx;

    .icon-btn {
      width: 120rpx;
      display: flex;
      align-items: center;
      flex-direction: column;

      .icon {
        margin-top: 20rpx;
        width: 50rpx;
        height: 50rpx;
      }

      .text {
        font-size: 12px;
        margin-bottom: 25rpx;
      }
    }

    .xunjia-btn {
      height: 80rpx;
      margin-left: 30rpx;
      margin-top: 20rpx;
      color: #fff;
      flex: 1;
      display: flex;
      align-items: center;
      font-size: 16px;
      justify-content: center;
      border-radius: 45rpx;
      background-color: #0D94FF;
    }
  }
}

</style>
